<template lang="pug">
  .container(v-if="flag")
    .swiper
      swiper(
        autoplay,
        indicator-dots,
        circular,
        intercal,
        :interval="interval",
        :duration="duration"
      )
        block(v-for="(item,index) in goods.goodsPictureList" :key="index")
          swiper-item
            image.slide-image(
              :src="item.pictureUrl",
              width="100%",
              height="300",
              :mode="mode"
            )
      //- 商品信息
    .goods-info
      .goods-name {{ goods.goodsName }}
      .goods-code {{ goods.goodsExtend.goodsCode }}
      .goods-briefInfo {{ goods.goodsExtend.goodsBriefInfo }}
      .goods-line
        .goods-price
          .present-price 
            .present-price ¥{{ goods.presentPrice }}       
            .original-price ¥{{ goods.originalPrice }} 
        button.goods-share(open-type="share", type="default")
          i.icon.iconfont.icon-share
          span 分享
    //- 商品规格选择
    .goods-category(@click="chooseGoods")
      .goods-choose
        span 选择
        span 规格
      .goods-tochoose
        i.icon.iconfont.icon-youjiantou1
    //- 选择规格的弹窗
    .goods-category-cover(:class="{onShow:showWrap}")
      .cover-bg(@click="hideWrap")
      .cover-content
        .goods-wrap
          .header
            .img-wrap
              img(:src="goods.defaultPicture")
            .main
              .price-wrap
                span.price ¥{{ goods.presentPrice }}
              .stock 库存{{ goods.totalInventory }}件
            .close(@click="hideWrap")
              i.icon.iconfont.icon-close
          .body
            .body-item
              .list-wrap
                h2 颜色分类  
                .items
                  a(:class="{active:specActive}",@click="chooseSpec()")
                    img(:src="goods.defaultPicture")
                    img.selected(:src="src",v-if="selected")  
                  a(v-for="(item,index) in goods.goodsRelationList",:key="index") 
                    img(:src="item.defaultPicture") 
              .number-wrap
                .number-line  
                  label 购买数量
                  .number
                    .btn.decrease(@click="decrement()") - 
                    input#number(type="number" ,v-model= "count",@change="checkVal()" )
                    .btn.increase(@click="increment()") +  
          .footer(v-if="type==0")
            a.cart(@click="inneraddCart(1)") 加入购物车
            a.buy.sure(@click="inneraddCart(2)")  立即购买
          .footer(v-else)
            a.sure(@click="sure(type)",) 确定
      
    //-商品详情图和评论
    .goods-detail
      .detail-tab
        span(
          @click = "seeDetail",
          v-bind:class="{ imgActive: imgActive }",
        ) 商品详情
        span(
          @click = "seeCommit",
          v-bind:class="{ commitActive: commitActive }",
        ) 评价
      .detail-img-content(v-if = "imgActive")
        wxParse(:content = "goods.goodsInfo.goodsInfo")
      .detail-commit-content
        .commit-main(v-if = "commitActive")
          span(
            v-text = "goods.goodsStat && goods.goodsStat.allCommentCount ? '好评 ('+goods.goodsStat.allCommentCount+')':'好评（0）'"
          )
          span(
            v-text = "goods.goodsStat && goods.goodsStat.goodCommentCount ? '好评率 '+goods.goodsStat.goodCommentCount+' ':'好评率 0%'"
          )   
    .footer-actionBar
      .footer-wrap
        .item(@click="home")
          i.icon.iconfont.icon-shouye
          span 首页
        .item(@click="collect",v-if="isLike")
          i.icon.iconfont.icon-shoucang1.like
          span 已收藏  
        .item(@click="collect",v-else)
          i.icon.iconfont.icon-shoucang
          span 收藏  
        .item(@click="cart")
          i.icon.iconfont.icon-gouwuche  
          span 购物车
        .addCar(@click="addCart(1)")
          span 加入购物车
        .buy(@click="addCart(2)")
          span 立即购买
  .hide(v-else)  
    Page(text="很抱歉，您查看的宝贝不存在，可能已下架",_class="hideIcon") 
</template>
<script>
import wxParse from "mpvue-wxparse"
import api from "@/api"
import Page from '@/components/blankPage'
import img from "static/images/icon/selected.png"

export default {
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function(options) {
    var id = this.goodsId;
    return {
      title: "嗨起购",
      path: "pages/mall/detail/main?goodsId=" + id
    };
  },
  components: {
    wxParse,
    Page
  },
  data () {
    return {
      flag: true, // 商品是否售罄
      interval: 3000,
      duration: 1000,
      //轮播图图片设置'保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。'
      mode: "aspectFit",
      goodsId: "", // 商品id
      isLike: false,
      // 商品信息
      goods: {
        goodsPictureList: [],
        goodsName: "",
        presentPrice: "",
        originalPrice: "",
        goodsInfo: {
          goodsInfo: ""
        },
        goodsExtend: {
          goodsCode: "",
          goodsBriefInfo: ""
        }
      },
      type: 0, // 0-直接弹窗确定 1-加入购物册 2-跳转立即购买
      count: 1,
      imgActive: true, 
      commitActive: false,
      showWrap: false,
      selected: false,
      specActive: false,
      src: img,
      userId: wx.getStorageSync("userId")
    }
  },
  created () {

  },
  mounted() {
    this.showWrap = false; //初始化选择弹窗默认值隐藏
    this.count = 1; //加入购物车默认值
    this.goodsId = this.$root.$mp.query.goodsId; //商品id
    this.getDetail(); //获取商品详情内容
    this.isCollected(); //判断商品是否被收藏
    wx.showLoading({
      title: "加载中"
    });
    this.specActive = false; //选择商品样式默认无
    this.selected = false;
  },
  methods: {
    // 获取数据
    getDetail () {
      var id = this.goodsId
      api.getDetail(id, {
        promotionCode: ""
      }).then(data => {
        if (data.result) {
          this.goods = data.result
          this.flag = true
        } else {
          this.flag = false
        }
        wx.hideLoading()
      })
    },
    // 选择规格
    chooseGoods () {
      this.showWrap = true;
      this.type = 0
    },
    seeDetail () {
      this.imgActive = true,
      this.commitActive = false;
    },
    seeCommit () {
      this.imgActive = false;
      this.commitActive = true;
    },
    chooseSpec () {
      this.specActive = true;
      this.selected = true
    },
    hideWrap () {
      this.showWrap = false
    },
    increment () {
      this.count += 1
    },
    decrement () {
      this.count -=1
      if (this.coung <= 1) {
        this.count = 1
      }
    },
    checkVal () {
      var reg = /^[1-9]\d*$/
      if(!reg.test(this.count)) {
        this.count = 1
      }
    },
    collect () {
      if (this.like) {
        return
      } else {
        let goodsId = this.goodsId;
        let userId = this.userId;
        api.addCollect({
          goodsId: goodsId,
          userId: userId
        }).then(data => {
          this.isLike = true
        })
      }
    },
    isCollected () {
      var goodsId = this.goodsId
      var userId = this.userId
      api
        .getCollecte({
          goodsId: goodsId,
          userId: userId
        })
        .then(data => {
          if (data.result) {
            this.isLike = true;
          } else {
            this.isLike = false
          }
        })
    },
    addCart (type) {
      this.type = type
      this.showWrap = true
    },
    sure (type) {
      this.addCartSuccess(type)
    },
    inneraddCart (type) {
      this.addCartSuccess(type)
    },
    // 加入购物车/立即购买逻辑
    addCartSuccess(type) {
      let buyFlg = type == "1" ? false : true;
      let userId = wx.getStorageSync("userId");
      if (this.specActive && this.selected) {
        //购物车
        // var shoppingCart = new Object();
        // //商品规格价格明细
        // var goodsPriceDetail = new Object();
        // goodsPriceDetail.goodsId = this.goodsId;
        // shoppingCart.goodsPriceDetail = goodsPriceDetail;
        // //商品ID
        // shoppingCart.goodsId = this.goodsId;
        // //用户ID
        //
        //
        // shoppingCart.userId = userId;
        // //商品数量
        // shoppingCart.goodsCount = this.count;
        // shoppingCart.buyFlg = type == "1" ? false : true;
        // shoppingCart = JSON.stringify(shoppingCart);

        // console.log(shoppingCart)

        api
          .addcart({
            buyFlg: buyFlg,
            goodsCount: this.count,
            goodsId: this.goodsId,
            goodsPriceDetail: {
              goodsId: this.goodsId,
              promotionCode: undefined
            },
            userId: userId,
            para: { type: type }
          })
          .then(({ data }) => {
            console.log(data);
            if (type == 1) {
              //console.log(typeof(shoppingCart))
              wx.showToast({
                title: "加入购物车成功",
                icon: "success",
                duration: 2000
              });
              this.showWrap = false;
            } else if (type == 2) {
              //跳转到确认订单页
              var ids = data.result;
              const url = `/pages/order/confirmOrder/main?&ids=${ids}`;
              wx.navigateTo({ url });
            }
          });
      } else {
        wx.showToast({
          title: "请选择规格型号",
          icon: "none",
          duration: 2000
        });
      }
    },
    home() {
      const url = "/pages/mall/index/main";
      wx.switchTab({ url });
    },
    cart() {
      const url = "/pages/mall/cart/main";
      wx.switchTab({ url });
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/styles/scss/public.scss";
.container {
  margin-bottom: 50px;

}
.swiper {
  width: 100%;
  height: 100%;
}
//轮播图
swiper {
  height: 300px;
  background: $bg-white;
  swiper-item {
    display: flex;
    justify-content: center;
    image {
      height: 100%;
    }
  }
}
//商品信息
.goods-info {
  width: 100%;
  background: $bg-white;
  padding: $padding;
  margin-bottom: $margin10;
  .goods-name {
    color: $goodsName;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 5px;
  }
  .goods-briefInfo {
    color: $gray;
    margin-top: 5px;
  }
  .goods-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .goods-price {
      display: flex;
      align-items: center;
      margin-top: 5px;
      .present-price {
        color: $red;
        font-size: 14px;
        font-weight: 600;
        margin-right: 10px;
      }
      .original-price {
        color: $gray;
        text-decoration: line-through;
      }
    }
    .goods-share {
      font-size: 12px;
      background: none;
      border: none;
      line-height: 32rpx;
      margin: 0;
      padding: 0;
      align-items: center;
      span {
        color: $gray;
      }
    }
    button::after {
      border: none;
    }
  }
}
//选择规格
.goods-category {
  @include display-flex-bet;
  padding: $padding;
  background: $bg-white;
  margin-bottom: $margin10;
  .goods-choose {
    @include display-flex;
    font-size: $size14;
    span {
      @include display-flex-cen;
      margin-right: 20px;
    }
  }
  .goods-choose span:last-of-type {
    font-size: $size12;
    color: $gray;
  }
  .goods-tochoose {
    color: $gray;
  }
}

//商品详情
.goods-detail {
  .detail-tab {
    background: $bg-white;
    font-size: $size14;
    @include display-flex;
    justify-content: space-around;
    margin-bottom: 1px;
    padding-bottom: $margin10;
    span {
      padding: $padding;
      border-bottom: 1px solid#fff;
    }
    .imgActive,
    .commitActive {
      color: $red;
      border-bottom: 1px solid $red;
    }
  }
  .commit-main {
    padding: $padding;
    background: $bg-white;
    font-size: $size12;
    @include display-flex-bet;
  }
}

.footer-actionBar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  .footer-wrap {
    width: 100%;
    height: 50px;
    background-color: #fff;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: space-between;
    .item {
      font-size: 14px;
      flex: 1;
      display: flex;
      color: $twofont;
      flex-direction: column;
      background: none;
      border: none;
      line-height: 38rpx;
      .like {
        color: $red;
      }
    }
    .addCar {
      width: 100px;
      color: #fff;
      line-height: 50px;
      background-color: #e69d37;
    }
    .buy {
      color: #fff;
      width: 100px;
      line-height: 50px;
      background-color: $red;
    }
  }
}
// 遮罩层
.goods-category-cover {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  transition: all 0.5s ease;
  transform: translateY(100%);
  overflow: hidden;
  .cover-bg {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background-color: rgba(0, 0, 0, 0.5);
  }
  .cover-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 20%;
    background-color: #fff;
    box-shadow: 0 -1px 40px rgba(0, 0, 0, 0.3);
    .goods-wrap {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      .header {
        padding: 10px 0 10px 126px;
        position: relative;
        .img-wrap {
          width: 100px;
          height: 100px;
          position: absolute;
          top: -28px;
          left: 10px;
          border-radius: 4px;
          overflow: hidden;
          border: 1px solid rgba(0, 0, 0, 0.1);
          padding: 1px;
          background-color: #fff;
        }
        .main {
          color: #051b28;
          font-size: 13px;
          line-height: 18px;
          padding-right: 20px;
          .price-wrap {
            width: 210px;
            .price {
              font-family: arial;
              font-size: 16px;
              color: $red;
              word-wrap: break-word;
            }
          }
        }
        .close {
          position: absolute;
          top: 6px;
          right: 10px;
        }
      }
      .body {
        padding: 0 15px 10px;
        position: absolute;
        bottom: 48px;
        top: 93px;
        left: 0;
        right: 0;
        overflow: auto;
        .body-item {
          .list-wrap {
            h2 {
              color: #666;
              font-size: 13px;
              font-weight: 400;
              padding-bottom: 10px;
              padding-top: 10px;
            }
            .items {
              border-bottom: 1px solid rgba(0, 0, 0, 0.1);
              a {
                position: relative;
                display: inline-block;
                border: 1px solid #f5f5f5;
                font-size: 13px;
                margin: 0 8px 8px 0;
                color: #555;
                width: 60px;
                height: 60px;
                position: relative;
                .selected {
                  position: absolute;
                  bottom: 0;
                  right: 0;
                  width: 20rpx;
                  height: 20rpx;
                }
              }
              .active {
                border: 1px solid $red;
              }
            }
          }
          .number-wrap {
            border-bottom: 2rpx solid rgba(0, 0, 0, 0.1);
            .number-line {
              padding-bottom: 10px;
              padding-top: 10px;
              line-height: 45px;
              label {
                color: #666;
                font-size: 13px;
                font-weight: 400;
              }
              .limit-txt {
                color: #666;
                font-size: 12px;
              }
              .number {
                height: 36px;
                width: 100px;
                border-radius: 3px;
                float: right;
                display: flex;

                .btn {
                  border: none;
                  outline: 0;
                  line-height: 32px;
                  height: 34px;
                  width: 30px;
                  font-size: 24px;
                  background-color: #f5f5f5;
                  text-align: center;
                }
                .disabled {
                  color: #cfcfcf;
                }
                .decrease {
                  border-right: 1px solid #fff;
                }
                input[type="number"] {
                  line-height: 32px;
                  height: 34px;
                  width: 36px;
                  text-align: center;
                  font-size: 13px;
                  border: 1px solid #f5f5f5;
                  background-color: #f5f5f5;
                  box-sizing: border-box;
                }
                .increase {
                  border-left: 1px solid #fff;
                }
              }
            }
          }
        }
      }
      .footer {
        display: block;
        display: flex;
        height: 48px;
        text-align: center;
        line-height: 48px;
        color: #fff;
        width: 100%;
        position: absolute;
        bottom: 0;
        .sure {
          justify-content: center;
          display: flex;
          flex: 1;
          color: #fff;
          background-color: $red;
          font-size: 15px;
          line-height: 50px;
        }
        .cart {
          justify-content: center;
          display: flex;
          flex: 1;
          color: #fff;
          background-color: #e69d37;
          font-size: 15px;
          line-height: 50px;
        }
      }
    }
  }
}
.goods-category-cover.onShow{
  transform: translateY(0)
}
image {
  width: 100%;
  height: 100%;
}

</style>
